<template>
  <div ref="container" class="swiper-container img-wrap">
    <div class="swiper-wrapper">
      <template v-if="canClick">
        <div class="swiper-slide" v-for="item of imgList" :key="item">
          <img :src="item" ref="img" @click="lookImg(item)" />
        </div>
      </template>

      <template v-else>
        <div class="swiper-slide" v-for="item of imgList" :key="item">
          <img :src="item" ref="img" />
        </div>
      </template>
    </div>
    <!-- 如果需要导航按钮 -->
    <div class="xsd-pre" v-show="button"></div>
    <div class="xsd-next" v-show="button"></div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination" v-show="dot"></div>
  </div>
</template>

<script>
import "swiper/swiper-bundle.css";
import Swiper from "swiper/swiper-bundle.js";
export default {
  data() {
    return {
      swiper: null,
      imgSrc: "",
    };
  },
  methods: {
    lookImg(item) {
      // console.log('hello');
      this.$emit("lookImg", item);
    },
    initSwiper() {
      let autoplay = {
        delay: 2500,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      };
      if (typeof this.autoplay === "number") {
        autoplay.delay = this.autoplay;
      }
      this.swiper = new Swiper(".swiper-container", {
        observer: true,
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
        // autoplay: false,
        autoplay: autoplay,
        navigation: {
          nextEl: ".xsd-next",
          prevEl: ".xsd-pre",
        },
      });
      if (this.autoplay === false) {
        this.swiper.autoplay.stop();
      }
    },
  },
  mounted() {
    this.initSwiper();
    setTimeout(() => {
      if (this.width != undefined) {
        this.$refs.container.style.width = this.width;
      }
      if (this.height != undefined) {
        this.$refs.container.style.height = this.height;
        this.$refs.img.forEach((item) => {
          item.style.height = this.height;
        });
      }
    });
  },
  props: [
    "imgList",
    "width",
    "height",
    "button",
    "dot",
    "autoplay",
    "canClick",
  ],
  watch: {
    width(newValue) {
      this.$refs.container.style.width = newValue;
    },
    height(newValue) {
      this.$refs.container.style.height = newValue;
      this.$refs.img.forEach((item) => {
        item.style.height = newValue;
      });
    },
    autoplay(newValue) {
      if (newValue === false) {
        this.swiper.autoplay.stop();
      } else if (typeof newValue === "number") {
        this.swiper.params.autoplay.delay = newValue;
        this.swiper.autoplay.start();
      } else {
        this.swiper.params.autoplay.delay = 2500;
        this.swiper.autoplay.start();
      }
    },
  },
};
</script>

<style scoped>
/deep/ .swiper-pagination-bullet-active {
  background-color: #eeeeee;
}

.swiper-container {
  position: relative;
  overflow: hidden;
}

.img-wrap {
  border-radius: 8px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  object-fit: cover;
  border-radius: 8px;
  overflow: hidden;
}

.xsd-pre,
.xsd-next {
  position: absolute;
  top: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-right: none;
  border-bottom: none;
  z-index: 10;
  outline: none;
}

.xsd-pre {
  left: 20px;
  transform: translateY(-50%) rotate(-45deg);
}

.xsd-next {
  right: 20px;
  transform: translateY(-50%) rotate(135deg);
}
</style>
